<template>
  <div>
    <div>100</div>
    <div style="color: blueviolet">{{ second }}</div>
    <div>100</div>
    <div id="fourth">100</div>
    <div ref="fifth">100</div>
    <ElButton type="primary" @click="mvvmIncrement()">mvvm自增长</ElButton>
    <ElButton type="warning" @click="domIncrement()">dom自增长</ElButton>
    <MyButtons btnType="primaryEx"></MyButtons>
    <!-- RoundOne 父组件 MyButtons 子组件 -->
    <!--  MyButtons 父标签 span 子标签-->
    <MyButtons :btnType="ac" :btns="bc">
      <template #header>
        <div>headerssss</div>
        <div>headerssss</div>
      </template>
      <template #default>
        <span>ooooooo</span>
        <ElButton>xxx</ElButton>
      </template>
      <template #footer>
        <div>footer</div>
      </template>
    </MyButtons>
    <!-- 一个子组件 包含自定义属性 自定义事件 和 自定义子标签 -->
    <ElMenu style="width: 200px">
      <ElSubMenu index="1">
        <template #title> <Elbutton>gggg</Elbutton> </template>
        <ElMenuItem>xxx</ElMenuItem>
        <ElMenuItem>yyy</ElMenuItem>
        <ElMenuItem>zzz</ElMenuItem>
      </ElSubMenu>
      <ElSubMenu index="2">
        <template #title> hhhhh </template>
        <ElMenuItem>2xxx</ElMenuItem>
        <ElMenuItem>2yyy</ElMenuItem>
        <ElMenuItem>2zzz</ElMenuItem>
      </ElSubMenu>
    </ElMenu>
  </div>
</template>
<script lang="ts">
/**
 * 页面核心数据结构体说明文档
 *
 *
 */
// import from
import MyButtons from '../components/MyButtons.vue'
export default {
  name: 'RoundOne',
  components: { MyButtons: MyButtons },
  props: {
    sampleP: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      sampleD: 'value',
      second: 100,
      // 贫模型 -> 富模型
      ac: 'successEx',
      bc: ['xxx', 'yyy', 'zzz']
    }
  },
  computed: {
    /* sampleC() {
      return this.sampleD + "--";
    }, */
  },
  created() {},
  mounted() {},
  methods: {
    // sampleM() {},
    mvvmIncrement() {
      this.second++
    },
    domIncrement() {
      // console.log("dom")
      const fourth: any = document.querySelector('#fourth')
      // console.log('当前fourth的值' + fourth.innerText)
      fourth.innerText++
      // console.log(this.$refs.fifth)
      // this.$refs.fifth
      const fifth: any = this.$refs['fifth']
      fifth.innerText++
    }
  },
  watch: {
    // sampleP(n, o) {},
  }
}
</script>

<!--<style scoped>-->
<style lang="scss" scoped></style>
